<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="keywords" content="bingblue、冰蓝、冰蓝科技、群官网、nodejs">
    <meta name="description" content="冰蓝科技 - 中国最炫、最潮流的科技网站，我们追寻最前沿的技术、展现最炫酷的效果，让你感受科技无可抵挡的魅力！">
    <meta name="author" contect="小牧COOL">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="css/formValidation.min.css" rel="stylesheet"> -->
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <!-- <link href="css/flat-ui.min.css" rel="stylesheet"> -->

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/vendor/html5shiv.js"></script>
      <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>
  <body style="background:#fff;padding-top:100px;">
    <div class="signup container">
       <div class="row">
         <div class="col-md-4 col-md-offset-4">
          <form id="sign-form" class="form-horizontal" action="/users/add" method="post">
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-user input-group-addon"></span>
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-pencil-square input-group-addon"></span>
                <input type="text" class="form-control" id="nickName" name="nickName" placeholder="请输入昵称">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-lock input-group-addon"></span>
                <input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-venus-mars input-group-addon"></span>
                <select class="form-control" id="userSex" name="userSex">
                  <option>男</option>
                  <option>女</option>
                  <option>人妖</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-phone-square input-group-addon"></span>
                <input type="tel" class="form-control" id="userPhone" name="userPhone" placeholder="请输入手机号">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="fa fa-envelope input-group-addon"></span>
                <input type="email" class="form-control" id="userEmail" name="userEmail" placeholder="请输入邮箱">
              </div>
            </div>
            <!-- <div class="form-group">
              <label class="col-sm-3 control-label" id="captchaOperation"></label>
              <div class="col-sm-2">
                <input type="text" class="form-control" name="captcha" />
              </div>
            </div> -->
            <div class="form-group">
              <div class="col-sm-12">
              <div class="checkbox">
                <label>
                  <input class="" type="checkbox" name="agree" value="agree" /> 阅读并接受<a href="#">《冰蓝用户协议》</a>
                </label>
              </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button type="submit" class="btn btn-info" name="signup" value="注册账号"><i class="fa fa-send"></i> 注册账号</button>
              </div>
            </div>
          </form>
         </div>
       </div>
    </div>
    <!-- /.container -->


    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.1.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/formValidation.min.js"></script>
    <script src="js/fd-bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
    $(function(){
      // Generate a simple captcha
      function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      };
      $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
      $('#sign-form').formValidation({
        err: {
          container: 'tooltip'
        },
        trigger: 'blur',
        message: '请输入正确信息',
        icon: {
          valid: 'fa fa-check',//thumbs-up
          invalid: 'fa fa-times',//thumbs-down
          validating: 'fa fa-spinner'//spinner
        },
        fields: {
          userName: {
            validators: {
              stringLength: {
                enabled: true,
                min: 6,
                max: 20,
                message: '用户名6~20个字符！'
              },
              notEmpty: {
                message: '用户名不能为空！'
              },
              regexp: {
                enabled: true,
                regexp: /(?!^\d+$)^[0-9a-zA-Z]*$/i,
                message: '用户名只能输入数字或字符a-z,且不能全为数字！'
              }
            }
          },
          nickName: {
            validators: {
              stringLength: {
                enabled: true,
                max: 30,
                message: '昵称最多30个字符！'
              },
              notEmpty: {
                message: '昵称不能为空！'
              },
              regexp: {
                enabled: false,
                regexp: /^[a-z]+$/i,
                message: '昵称只能输入数字或字符a-z,且不能全为数字！'
              }
            }
          },
          userEmail: {
            validators: {
              notEmpty: {
                message: '邮箱不能为空！'
              },
              emailAddress: {
                message: '邮箱地址不正确！'
              }
            }
          },
          userPwd: {
            validators: {
              stringLength: {
                enabled: true,
                max: 30,
                min: 8,
                message: '密码最少8个字符！'
              },
              notEmpty: {
                message: '密码不能为空！'
              },
              different: {
                field: 'username',
                message: '密码不能和用户名相同！'
              }
            }
          },
          userPhone: {
            validators: {
              notEmpty: {
                message: '手机号不能为空！'
              },
              phone:{
                message: '手机号不正确！',
                country: 'CN'
              }
            }
          },
          userSex: {
            validators: {
              notEmpty: {
                message: '性别不能为空！'
              }
            }
          },
          captcha: {
            validators: {
              callback: {
              message: '小学数学没学好吗？',
                callback: function(value, validator, $field) {
                  var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                  return value == sum;
                }
              }
            }
          },
          agree: {
            validators: {
              notEmpty: {
                message: '请先同意卖身契！'
              }
            }
          }
        }
      });
    });
    </script>
  </body>
</html>
